<template>
  <div class="knowledge-admin-container">
    <!-- 顶部导航 -->
    <div class="top-navigation">
      <div class="nav-content">
        <div class="nav-left">
          <div class="nav-icon">
            <el-icon size="32" color="#fff"><Star /></el-icon>
          </div>
          <div class="nav-text">
            <h1>知识图谱管理中心</h1>
            <p>构建智能化的学习生态系统</p>
          </div>
          <el-tag type="success" effect="light" class="admin-tag">
            🔒 管理员权限
          </el-tag>
        </div>
        <div class="nav-right">
          <el-button circle :icon="Download" class="nav-btn" />
          <el-button circle :icon="Upload" class="nav-btn" />
          <el-button circle :icon="Setting" class="nav-btn" />
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 标签页导航 -->
      <div class="tab-navigation">
        <div class="tab-container">
          <div class="tab-wrapper">
            <div 
              v-for="tab in tabs" 
              :key="tab.id"
              :class="['tab-item', { active: activeTab === tab.id }]"
              @click="activeTab = tab.id"
            >
              <component :is="tab.icon" class="tab-icon" />
              <span>{{ tab.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 总览页面 -->
        <div v-if="activeTab === 'overview'" class="overview-content">
          <!-- 欢迎区域 -->
          <div class="welcome-banner">
            <div class="banner-overlay"></div>
            <div class="banner-decoration">
              <el-icon size="96"><Star /></el-icon>
            </div>
            <div class="banner-content">
              <h1>欢迎回来，管理员 ✨</h1>
              <p>今天有 <span class="highlight">23</span> 名新学习者加入了您的知识图谱</p>
            </div>
          </div>

          <!-- 统计卡片 -->
          <div class="stats-grid">
            <el-card 
              v-for="(stat, index) in statistics" 
              :key="index"
              class="stat-card"
              :class="`stat-card-${index}`"
              shadow="hover"
            >
              <div class="stat-content">
                <div class="stat-icon" :class="`stat-icon-${index}`">
                  <component :is="stat.icon" />
                </div>
                <div class="stat-info">
                  <p class="stat-title">{{ stat.title }}</p>
                  <p class="stat-value">{{ stat.value }}</p>
                </div>
              </div>
              <div class="stat-footer">
                <span class="stat-change" :class="`stat-change-${index}`">{{ stat.change }}</span>
              </div>
            </el-card>
          </div>

         

          <!-- 最新活动 -->
          <el-card class="activity-overview" shadow="hover">
            <template #header>
              <h3>最新活动动态</h3>
            </template>
            
            <div class="activity-list">
              <div 
                v-for="(activity, index) in activities" 
                :key="index" 
                class="activity-item"
              >
                <div class="activity-icon" :class="`activity-icon-${index}`">
                  <component :is="activity.icon" />
                </div>
                <div class="activity-content">
                  <p class="activity-title">{{ activity.text }}</p>
                  <div class="activity-meta">
                    <span>{{ activity.time }}</span>
                    <span>•</span>
                    <el-tag size="small" type="info">{{ activity.category }}</el-tag>
                  </div>
                </div>
                <el-icon class="activity-arrow"><ArrowRight /></el-icon>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 知识点管理页面 -->
        <NodeManagement 
          v-if="activeTab === 'nodes'" 
          ref="nodeManagementRef"
          :categories="categories"
          :all-nodes="allNodes"
           :current-category="categoryInfo"
          @refresh-data="refreshNodeData"
        />

        <!-- 关系管理页面 -->
        <RelationManagement 
          v-if="activeTab === 'relations'" 
          :relations="relations"
          :all-nodes="allNodes"
           :current-category="categoryInfo"
          @open-modal="openRelationModal"
        />

        <!-- 学习路径页面 -->
        <PathManagement 
          v-if="activeTab === 'paths'" 
          :learning-paths="learningPaths"
          :all-nodes="allNodes"
           :current-category="categoryInfo"
          @open-modal="openPathModal"
        />
      </div>
    </div>

    <!-- 浮动操作按钮 -->
    <div class="floating-actions">
      <el-button 
        circle 
        type="primary" 
        @click="handleFloatingAction('node')"
        class="float-btn"
        title="快速添加知识点"
      >
        <el-icon><Plus /></el-icon>
      </el-button>
      <el-button 
        circle 
        type="success" 
        @click="handleFloatingAction('relation')"
        class="float-btn"
        title="快速添加关系"
      >
        <el-icon><Share /></el-icon>
      </el-button>
      <el-button 
        circle 
        type="warning" 
        @click="handleFloatingAction('path')"
        class="float-btn"
        title="快速创建路径"
      >
        <el-icon><Reading /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, markRaw, nextTick,onBeforeUnmount,watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Star, Download, Upload, Setting, ArrowRight, 
  Plus, Share, Reading, Tickets, Document, } from '@element-plus/icons-vue'
import NodeManagement from '@/components/NodeManagement.vue'
import RelationManagement from '@/components/RelationManagement.vue'
import PathManagement from '@/components/PathManagement.vue'
import { get } from '@/axios/index'
import { useRoute} from 'vue-router'

const route = useRoute()
  
// 从路由参数获取技术方向信息
const categoryInfo = reactive({
  categoryId: route.query.categoryId,
  categoryKey: route.query.categoryKey,
  categoryName: route.query.categoryName || '未知技术方向'
})

// 监听路由变化，更新技术方向信息
watch(() => route.query, (newQuery) => {
  if (newQuery.categoryId || newQuery.categoryKey) {
    categoryInfo.categoryId = newQuery.categoryId
    categoryInfo.categoryKey = newQuery.categoryKey
    categoryInfo.categoryName = newQuery.categoryName || '未知技术方向'
    
    // 重新加载相关数据
    loadCategories()
    loadCategoryStatistics() // 添加这行
  }
})

// 响应式数据
const activeTab = ref('overview')
const categoriesLoading = ref(false)

// 分类管理相关状态
const showCategoryModal = ref(false)
const isCategoryEditMode = ref(false)
const editingCategoryId = ref(null)

// 组件引用
const nodeManagementRef = ref()
const categoryFormRef = ref()

// 唯一性校验相关
let nameValidationTimer = null
let keyValidationTimer = null

// 表单数据————技术方向管理
const categoryForm = reactive({
  categoryName: '',
  categoryKey: '',
  icon: '',
  color: '',
  description: '',
  difficultyLevel: '',
  estimatedDuration: '',
  isActive: 1
})


const loadCategories = async () => {
  categoriesLoading.value = true
  try {
    // 方法1: 通过知识点API获取（包含节点统计）
    const response = await get('/knowledgeNode/categories')
    console.log('技术方向数据响应:', response)
    
    if (response && response.data && Array.isArray(response.data)) {
      categories.value = response.data.map(category => ({
        id: category.id,
        categoryKey: category.categoryKey || category.key,
        categoryName: category.categoryName || category.name,
        icon: category.icon,
        color: category.color,
        description: category.description,
        difficultyLevel: category.difficultyLevel,
        estimatedDuration: category.estimatedDuration,
        isActive: category.isActive,
        nodeCount: category.nodeCount || 0
      }))
      
      console.log('处理后的技术方向数据:', categories.value)
    } else {
      console.warn('技术方向数据格式异常，尝试备用方案')
      
      // 方法2: 直接从技术方向API获取
      const fallbackResponse = await get('/techCategory/options/enabled')
      if (fallbackResponse && fallbackResponse.data) {
        categories.value = fallbackResponse.data.map(category => ({
          id: null, // 从选项API获取时可能没有ID
          categoryKey: category.value,
          categoryName: category.label,
          icon: category.icon || '📚',
          color: getDefaultGradient(category.value),
          description: '',
          difficultyLevel: 'intermediate',
          estimatedDuration: '待定',
          isActive: 1,
          nodeCount: 0
        }))
      } else {
        categories.value = []
      }
    }
  } catch (error) {
    console.error('加载技术方向失败:', error)
    ElMessage.error('加载技术方向数据失败')
    categories.value = []
  } finally {
    categoriesLoading.value = false
  }
}


onBeforeUnmount(() => {
  if (nameValidationTimer) {
    clearTimeout(nameValidationTimer)
  }
  if (keyValidationTimer) {
    clearTimeout(keyValidationTimer)
  }
})

// 标签页配置
const tabs = [
  { id: 'overview', name: '总览仪表板', icon: markRaw(Star) },
  { id: 'nodes', name: '知识点管理', icon: markRaw(Tickets) },
  { id: 'relations', name: '关系管理', icon: markRaw(Share) },
  { id: 'paths', name: '学习路径', icon: markRaw(Reading) }
]

// 统计数据改为响应式
const statistics = ref([
  { title: '总知识点', value: '0', change: '+0', icon: markRaw(Tickets) },
  { title: '学习路径', value: '12', change: '3 推荐', icon: markRaw(Reading) },
  { title: '活跃学习者', value: '833', change: '+12%', icon: markRaw(Document) },
  { title: '平均完成率', value: '72%', change: '需优化', icon: markRaw(Star) }
])

// 加载当前技术方向的统计数据
// 加载当前技术方向的统计数据
const loadCategoryStatistics = async () => {
  try {
    if (!categoryInfo.categoryId) {
      // 如果没有特定技术方向，显示总体统计
      statistics.value[0] = { 
        title: '总知识点', 
        value: '45', 
        change: '+5', 
        icon: markRaw(Tickets) 
      }
      statistics.value[1] = {
        title: '学习路径',
        value: '12',
        change: '3 推荐',
        icon: markRaw(Reading)
      }
      return
    }

    // 同时获取知识点和学习路径统计
    const [statsResponse, pathStatsResponse] = await Promise.all([
      // 获取知识点统计
      get(`/knowledgeNode/categoryStatistics/${categoryInfo.categoryId}`).catch(() => null),
      // 获取学习路径统计
      get(`/learningPath/countByCategory/${categoryInfo.categoryId}`).catch(() => null)
    ])

    // 处理知识点统计
    if (statsResponse && statsResponse.data) {
      const stats = statsResponse.data
      statistics.value[0] = {
        title: `${categoryInfo.categoryName || '当前技术方向'} 知识点`,
        value: stats.totalNodes?.toString() || '0',
        change: stats.recentChange || '+0',
        icon: markRaw(Tickets)
      }
      
      // 平均难度计算
      if (stats.difficultyStats) {
        const avgDifficulty = calculateAverageDifficulty(stats.difficultyStats)
        statistics.value[3] = {
          title: '平均难度',
          value: `${'⭐'.repeat(Math.round(avgDifficulty))} ${avgDifficulty.toFixed(1)}`,
          change: avgDifficulty >= 3 ? '有挑战' : '适中',
          icon: markRaw(Star)
        }
      }
    }

    // 处理学习路径统计
    if (pathStatsResponse && pathStatsResponse.data) {
      const pathStats = pathStatsResponse.data
      statistics.value[1] = {
        title: `${categoryInfo.categoryName || '当前技术方向'} 学习路径`,
        value: pathStats.totalPaths?.toString() || '0',
        change: pathStats.recommendedCount ? `${pathStats.recommendedCount} 推荐` : '0 推荐',
        icon: markRaw(Reading)
      }
    } else {
      // 备用方案：使用通用API获取数量
      try {
        const fallbackResponse = await get('/learningPath/list', {
          pageNum: 1,
          pageSize: 1,
          categoryId: categoryInfo.categoryId
        })
        
        if (fallbackResponse && fallbackResponse.data) {
          const total = fallbackResponse.data.total || 0
          statistics.value[1] = {
            title: `${categoryInfo.categoryName || '当前技术方向'} 学习路径`,
            value: total.toString(),
            change: '0 推荐',
            icon: markRaw(Reading)
          }
        }
      } catch (fallbackError) {
        console.error('备用学习路径统计加载失败:', fallbackError)
      }
    }

  } catch (error) {
    console.error('加载技术方向统计失败:', error)
    
    // 最终备用方案：分别获取知识点和学习路径数量
    try {
      const [nodeResponse, pathResponse] = await Promise.all([
        get('/knowledgeNode/list', {
          pageNum: 1,
          pageSize: 1,
          category: categoryInfo.categoryId
        }).catch(() => null),
        get('/learningPath/list', {
          pageNum: 1,
          pageSize: 1,
          categoryId: categoryInfo.categoryId
        }).catch(() => null)
      ])
      
      if (nodeResponse && nodeResponse.data) {
        const total = nodeResponse.data.total || 0
        statistics.value[0] = {
          title: `${categoryInfo.categoryName || '当前技术方向'} 知识点`,
          value: total.toString(),
          change: '+0',
          icon: markRaw(Tickets)
        }
      }
      
      if (pathResponse && pathResponse.data) {
        const total = pathResponse.data.total || 0
        statistics.value[1] = {
          title: `${categoryInfo.categoryName || '当前技术方向'} 学习路径`,
          value: total.toString(),
          change: '0 推荐',
          icon: markRaw(Reading)
        }
      }
      
    } catch (fallbackError) {
      console.error('所有备用统计加载都失败:', fallbackError)
      ElMessage.warning('获取统计数据失败')
    }
  }
}

// 计算平均难度的辅助方法
const calculateAverageDifficulty = (difficultyStats) => {
  let totalNodes = 0
  let weightedSum = 0
  
  for (let difficulty = 1; difficulty <= 5; difficulty++) {
    const count = difficultyStats[difficulty] || 0
    totalNodes += count
    weightedSum += difficulty * count
  }
  
  return totalNodes > 0 ? weightedSum / totalNodes : 0
}

// 分类数据（从后端获取）
const categories = ref([])

// 活动数据
const activities = ref([
  { icon: markRaw(Plus), text: '新增知识点: Vue.js 组件开发', time: '2小时前', category: '前端开发' },
  { icon: markRaw(Share), text: '更新关系: JavaScript → TypeScript', time: '5小时前', category: '前端开发' },
  { icon: markRaw(Reading), text: '新建路径: 微服务架构入门', time: '1天前', category: '后端开发' },
  { icon: markRaw(Star), text: '路径完成: 前端开发入门 (张三)', time: '2天前', category: '学习记录' }
])

// 示例数据
const allNodes = ref([])
const relations = ref([])
const learningPaths = ref([])


// 刷新节点数据
const refreshNodeData = () => {
  // 触发NodeManagement组件重新加载数据
  if (nodeManagementRef.value && nodeManagementRef.value.loadNodes) {
    nodeManagementRef.value.loadNodes()
  }
  // 同时刷新分类数据
  loadCategories()
}

// 处理浮动按钮操作
const handleFloatingAction = (type) => {
  if (type === 'node') {
    // 如果当前不在知识点管理页面，先切换过去
    if (activeTab.value !== 'nodes') {
      activeTab.value = 'nodes'
      // 等待组件渲染完成后再打开模态框
      nextTick(() => {
        if (nodeManagementRef.value && nodeManagementRef.value.openModal) {
          nodeManagementRef.value.openModal('add')
        }
      })
    } else {
      // 已经在知识点管理页面，直接打开模态框
      if (nodeManagementRef.value && nodeManagementRef.value.openModal) {
        nodeManagementRef.value.openModal('add')
      }
    }
  } else if (type === 'relation') {
    openRelationModal()
  } else if (type === 'path') {
    openPathModal()
  }
}

// 关系和路径模态框处理（暂时保留空函数，可以后续扩展）
const openRelationModal = () => {
  ElMessage.info('关系管理功能开发中...')
}

const openPathModal = () => {
  ElMessage.info('学习路径功能开发中...')
}

const closeCategoryModal = () => {
  showCategoryModal.value = false
  resetCategoryForm()
}

const resetCategoryForm = () => {
  Object.assign(categoryForm, {
    categoryName: '',
    categoryKey: '',
    icon: '',
    color: '',
    description: '',
    difficultyLevel: '',
    estimatedDuration: '',
    isActive: 1
  })
  
  // 清空表单验证
  nextTick(() => {
    if (categoryFormRef.value) {
      categoryFormRef.value.clearValidate()
    }
  })
  
  isCategoryEditMode.value = false
  editingCategoryId.value = null
}


// 工具方法
const getDefaultGradient = (categoryKey) => {
  const gradients = {
    frontend: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    backend: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    database: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    devops: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    ai: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    mobile: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
  }
  return gradients[categoryKey] || 'linear-gradient(135deg, #9f8eaf 0%, #c5a7be 100%)'
}

// 组件挂载时加载数据
onMounted(() => {
  loadCategories()

 loadCategoryStatistics() // 添加这行

  // 手动检查初始路由参数
  const query = route.query
  if (query.categoryId || query.categoryKey) {
    categoryInfo.categoryId = query.categoryId
    categoryInfo.categoryKey = query.categoryKey  
    categoryInfo.categoryName = query.categoryName || '未知技术方向'
    
    // 初始加载统计数据
    loadCategoryStatistics()
  }
})
</script>

<style scoped>
/* 基础样式 */
.knowledge-admin-container {
  min-height: 100vh;
  background: #f8fafc;
}

/* 顶部导航 */
.top-navigation {
  background: #9f8eaf;
  border-bottom: 1px solid #ccb2c8;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-icon {
  padding: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.nav-text h1 {
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0 0 2px 0;
}

.nav-text p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 14px;
}

.admin-tag {
  font-weight: 500;
  font-size: 12px;
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.nav-right {
  display: flex;
  gap: 12px;
}

.nav-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  background: rgba(148, 163, 184, 0.2);
  color: white;
}

/* 主要内容 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* 标签页导航优化 */
.tab-navigation {
  margin-bottom: 32px;
}

.tab-container {
  background: white;
  border-radius: 16px;
  padding: 6px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tab-wrapper {
  display: flex;
  gap: 4px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #64748b;
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  justify-content: center;
  position: relative;
}

.tab-item:hover {
  color: #374151;
  background: rgba(159, 142, 175, 0.08);
}

.tab-item.active {
  background: linear-gradient(135deg, #9f8eaf 0%, #c5a7be 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(159, 142, 175, 0.3);
}

.tab-icon {
  width: 18px;
  height: 18px;
}

/* 模态框表单样式 */
.modal-content {
   padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.category-form :deep(.el-form-item) {
  margin-bottom: 22px;
}

.category-form :deep(.el-form-item__label) {
  font-weight: 600;
  color: #374151;
  line-height: 1.5;
}

.category-form :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e8cadb;
  transition: all 0.3s ease;
}

.category-form :deep(.el-input__wrapper):hover {
  border-color: #9f8eaf;
}

.category-form :deep(.el-textarea__inner:focus) {
  border-color: #9f8eaf;
  box-shadow: 0 0 0 2px rgba(159, 142, 175, 0.1);
}

.category-form :deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e8cadb;
}

.category-form :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 1px solid #e8cadb;
  transition: all 0.3s ease;
}

.category-form :deep(.el-textarea__inner:focus) {
  border-color: #9f8eaf;
  box-shadow: 0 0 0 2px rgba(159, 142, 175, 0.1);
}

.category-form :deep(.el-input-number) {
  width: 100%;
}

.category-form :deep(.el-input-number .el-input__wrapper) {
  border-radius: 8px;
}

.category-form :deep(.el-input__wrapper.is-focus) {
  border-color: #9f8eaf;
  box-shadow: 0 0 0 2px rgba(159, 142, 175, 0.1);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 调整模态框宽度和响应式 */
.custom-dialog {
  width: 90% !important;
  max-width: 800px !important;
  border-radius: 16px;
  overflow: hidden;
  margin: auto !important;
}

.custom-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #faf8fc 0%, #f8fafc 100%);
  border-bottom: 1px solid #f1f5f9;
  padding: 20px 24px;
  border-radius: 16px 16px 0 0 !important;
  text-align: center;
}

.custom-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 0;
}

/* 加载状态样式 */
.loading-container {
  padding: 20px;
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .main-content {
    padding: 20px 16px;
  }

  .nav-content {
    padding: 20px 16px;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .tab-wrapper {
    flex-direction: column;
  }

  .tab-item {
    justify-content: flex-start;
    padding: 12px 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .tech-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .welcome-banner {
    padding: 24px;
    margin-bottom: 24px;
  }

  .banner-content h1 {
    font-size: 24px;
  }

  .banner-content p {
    font-size: 16px;
  }

  .floating-actions {
    bottom: 16px;
    right: 16px;
  }

  .float-btn {
    width: 48px;
    height: 48px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .custom-dialog {
    width: 95% !important;
    max-width: none !important;
    margin-top: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .modal-content {
    padding: 15px;
  }
  
  .category-form :deep(.el-form-item__label) {
    font-size: 14px;
  }
  
  .dialog-footer {
    padding: 15px;
    flex-direction: column;
  }
  
  .dialog-footer .el-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .custom-dialog {
    width: 98% !important;
    margin-left: 1%;
    margin-right: 1%;
  }
  
  .category-form :deep(.el-form-item__label) {
    text-align: left;
    padding-bottom: 5px;
  }
  
  .category-form :deep(.el-form-item__content) {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 欢迎横幅 */
.welcome-banner {
  background: linear-gradient(135deg, #B5ACC9 0%, #B5ACC9 100%);
  border-radius: 24px;
  padding: 32px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}

.banner-decoration {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.2;
}

.banner-content {
  position: relative;
  z-index: 10;
}

.banner-content h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.banner-content p {
  font-size: 16px;
  opacity: 0.9;
}

.highlight {
  font-weight: bold;
  color: #fbbf24;
}

/* 统计卡片 */
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 28px 24px;
  position: relative;
  z-index: 2;
}

.stat-icon {
  padding: 16px;
  border-radius: 16px;
  color: white;
  margin-right: 20px;
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.stat-card-0 { 
  background: linear-gradient(135deg, #9f8eaf 0%, #c5a7be 100%);
}
.stat-card-1 { 
  background: linear-gradient(135deg, #a3a88f 0%, #c9afbc 100%);
}
.stat-card-2 { 
  background: linear-gradient(135deg, #d2dee5 0%, #e8cadb 100%);
}
.stat-card-3 { 
  background: linear-gradient(135deg, #f5e2c3 0%, #fdf4e3 100%);
}

.stat-card-0 .stat-icon { background: rgba(255, 255, 255, 0.25); }
.stat-card-1 .stat-icon { background: rgba(255, 255, 255, 0.25); }
.stat-card-2 .stat-icon { background: rgba(143, 108, 129, 0.3); }
.stat-card-3 .stat-icon { background: rgba(163, 133, 113, 0.3); }

.stat-footer {
  position: absolute;
  bottom: 12px;
  right: 20px;
  z-index: 2;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

/* 技术概览 */
.tech-overview {
  background: white;
  border: none;
  border-radius: 16px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tech-overview :deep(.el-card__header) {
  border-bottom: 1px solid #f1f5f9;
  padding: 24px 28px;
  background: linear-gradient(135deg, #faf8fc 0%, #f8fafc 100%);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.card-header p {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  padding: 28px;
}

.tech-card {
  border-radius: 20px;
  padding: 28px 24px;
  color: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.tech-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.tech-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tech-icon {
  font-size: 40px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.tech-info {
  flex: 1;
  margin-left: 16px;
}

.tech-info h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tech-info p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.tech-progress {
  margin-top: 24px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.tech-progress :deep(.el-progress-bar__outer) {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.tech-progress :deep(.el-progress-bar__inner) {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.status-tag {
  background: rgba(255, 255, 255, 0.25);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
  font-weight: 600;
  color: white;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tech-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tech-card:hover .tech-actions {
  opacity: 1;
}

.action-btn {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.edit-btn {
  background: linear-gradient(135deg, #a8e6a3 0%, #7dd87a 100%) !important;
  border: 1px solid #7dd87a !important;
  color: white !important;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #7dd87a 0%, #5fb85c 100%) !important;
  border-color: #5fb85c !important;
  transform: scale(1.05);
}

.delete-btn {
  background: linear-gradient(135deg, #ffb3ba 0%, #ff8a95 100%) !important;
  border: 1px solid #ff8a95 !important;
  color: white !important;
}

.delete-btn:hover {
  background: linear-gradient(135deg, #ff8a95 0%, #ff6b7d 100%) !important;
  border-color: #ff6b7d !important;
  transform: scale(1.05);
}

.difficulty-badge {
  background: rgba(255, 255, 255, 0.25);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

/* 活动概览 */
.activity-overview {
  background: white;
  border-radius: 16px;
  border: none;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.activity-overview :deep(.el-card__header) {
  background: linear-gradient(135deg, #faf8fc 0%, #f8fafc 100%);
  border-bottom: 1px solid #f1f5f9;
  padding: 20px 24px;
}

.activity-overview h3 {
  color: #1e293b;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.activity-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 0 3px 3px 0;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: rgba(159, 142, 175, 0.05);
  transform: translateX(8px);
}

.activity-item:hover::before {
  background: #9f8eaf;
}

.activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.activity-icon-0 { background: linear-gradient(135deg, #9f8eaf 0%, #c5a7be 100%); }
.activity-icon-1 { background: linear-gradient(135deg, #a3a88f 0%, #c9afbc 100%); }
.activity-icon-2 { background: linear-gradient(135deg, #7393c6 0%, #99b4cc 100%); }
.activity-icon-3 { background: linear-gradient(135deg, #e8cadb 0%, #faf1f8 100%); }

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.4;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
}

.activity-arrow {
  color: #9f8eaf;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateX(-4px);
}

.activity-item:hover .activity-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* 浮动操作按钮 */
.floating-actions {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
}

.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
</style>